<template>
  <div class="detail" v-if="data">
    <div class="deimgbox">
      <img :src="data.bigimg" alt="" />
      <div class="topicon">
        <em></em>
        <div class="ic">
          <i class="one" @click="goba"></i><i class="two"></i>
        </div>
      </div>
    </div>
    <div class="deziliao">
      <p class="name">{{ data.name }}</p>
      <p class="dengji">{{ data.personal }}</p>
      <p class="kuai">
        <span class="left"><i>婚恋家庭</i><i>情绪压力</i><i>亲自教育</i></span>
        <span class="right"><i>粉丝1620</i> | <i>访客数20732</i> </span>
      </p>
    </div>
    <div class="deservice">
      <div class="left">
        <i class="star">{{ data.star }}</i>
        <van-rate
          v-model="data.star"
          size="12px"
          gutter="2px"
          :readonly="true"
          allow-half
        />
        <span>
          <em>{{ data.evaluate }}</em
          >人评价 ></span
        >
      </div>
      <div class="right">
        <span><em>8</em><i>持证年限</i></span>
        <span
          ><em>{{ data.assistance }}</em
          ><i>帮助人数</i></span
        >
        <span
          ><em>{{ data.items }}</em
          ><i>服务时长</i></span
        >
      </div>
    </div>
    <div class="baozhang">
      <img
        src="http://121.41.11.36:3000/images/firdetailimg/baozhang.png"
        alt=""
      />
    </div>
    <div class="check">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="item"
          @click="colchange(index)"
          :class="{ liactive: col == index }"
        >
          {{ item }}
        </li>
      </ul>
      <div class="wai">
        <div class="nei">
          <span
            v-for="(item, index) in list2"
            :key="item"
            @click="spanchange(index)"
            :class="{ spanactive: sp == index }"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
    <ul class="tuijian gun1" v-if="data1">
      <li v-for="item in data1" :key="item.title">
        <div class="left">
          <h4>{{ item.title }}</h4>
          <p>
            <span class="fir"
              ><i>￥</i><em>{{ item.price }}</em
              >/30分钟</span
            ><span class="sec">好评率<i>100.0%</i></span>
          </p>
        </div>
        <div class="right">
          <button>预约</button>
          <p>销量{{ item.sell }}</p>
        </div>
      </li>
    </ul>
    <div class="dibu">
      <div class="smalog">
        <span
          ><img
            src="http://121.41.11.36:3000/images/firdetailimg/log1.png"
            alt=""
          /><em>顶部</em></span
        >
        <span
          ><img
            src="http://121.41.11.36:3000/images/firdetailimg/log2.png"
            alt=""
          /><em>关注</em></span
        >
      </div>
      <div class="anniu anniu1">私聊</div>
      <div class="anniu anniu2">
        <img
          src="https://static.ydlcdn.com/m/images/zx/experts/detail/icon_upward.png"
          alt=""
        />
        查看服务
      </div>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
// import BetterScroll from "better-scroll";
export default {
  setup() {
    // 获取路由
    const route = useRoute();
    const router = useRouter();
    // console.log(route.params.id);
    const store = useStore();
    // 获取状态管理中的数据
    const data = computed(() => store.state.detail.data);

    const fn = () => store.dispatch("getdetailasync", { id: route.params.id });

    const col = ref(0);
    const sp = ref(0);
    const list = reactive(["服务", "评价", "介绍", "解答", "专栏"]);
    const list2 = reactive([
      "全部",
      "恋爱情感",
      "情绪压力",
      "婚姻情感",
      "职场发展",
      "消除恐怖",
      "情绪压力",
      "成瘾矫正",
    ]);
    // 给li添加点击事件
    const colchange = (i) => {
      col.value = i;
    };
    const spanchange = (i) => {
      sp.value = i;
    };

    // 点击返回上一页

    const goba = () => {
      console.log(1);
      router.go(-1);
    };

    // 渲染下部列表
    const data1 = computed(() => store.state.detail.data1);
    const fn1 = () => store.dispatch("getdetailasync1");

    onMounted(() => {
      fn();
      fn1();
    });

    return {
      data,
      fn,
      list,
      list2,
      ref,
      col,
      colchange,
      sp,
      spanchange,
      goba,
      data1,
      fn1,
    };
  },
};
</script>

<style lang="less">
// 设置评分星星的背景色
.van-rate__icon--full {
  background: #ff5744;
}
div::-webkit-scrollbar {
  width: 0; //滚动时不显示滚动条
}
:root {
  --van-tabbar-item-text-color: #d3d3d5;
  --van-cell-font-size: 11px;
  --van-cell-text-color: #b5b5b9;
  --van-rate-icon-full-color: #fff; //评分星星颜色
}
.detail {
  font-family: PingFang SC;
}
.deimgbox {
  width: 100%;
  height: 242px;
  position: relative;
  z-index: 0;
  img {
    width: 100%;
    height: 410px;
  }
  .topicon {
    width: 100%;
    position: absolute;
    top: 45px;
    z-index: 9;
    left: 0;
    em,
    i {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-left: 7px;
    }
    em {
      background: url(http://121.41.11.36:3000/images/firdetailimg/icon1.png);
      background-size: 100% 100%;
    }
    .one {
      background: url(http://121.41.11.36:3000/images/firdetailimg/icon2.png);
      background-size: 100% 100%;
      margin-right: 50px;
      z-index: 999999;
    }
    .two {
      margin-right: 9px;
      display: inline-block;
      background: url(http://121.41.11.36:3000/images/firdetailimg/icon3.png);
      background-size: 100% 100%;
      position: absolute;
      top: -3px;
      right: 0;
    }
    div {
      float: right;
    }
  }
}
// 图片下部透明背景个人信息
.deziliao {
  position: relative;
  padding-left: 12px;
  .name {
    font-size: 24px;
    color: #fff;
    position: relative;
    z-index: 999;
  }
  .dengji {
    font-size: 14px;
    color: #fff;
    line-height: 27px;
  }
  .kuai {
    position: relative;
    .left {
      i {
        display: inline-block;
        // height: 14px;
        background: #72757c;
        border-radius: 1px;
        margin-right: 10px;
        color: #fff;
        padding: 2px 3px;
      }
    }
    .right {
      position: absolute;
      right: 17px;
      color: #fff;
      z-index: 999;
      font-size: 9px;
    }
  }
}

.deservice {
  margin-top: 9px;
  width: 100%;
  height: 76px;
  background: #fff;
  display: flex;
  flex-direction: row;
  padding: 21px 12px 18px 12px;
  justify-content: space-between;
  position: relative;
  z-index: 999;
  .left {
    .star {
      font-size: 24px;
      font-family: San Francisco Text;
      font-weight: 400;
      color: #eb5d4a;
    }
    span {
      display: block;
      color: #262626;
      margin-top: 7px;
      em {
        font-weight: normal;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: row;

    span {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      text-align: center;
      margin-left: 22px;
      em {
        font-size: 22px;
        font-family: San Francisco Text;
        color: #222222;
        font-weight: normal;
      }
      i {
        font-size: 10px;
        color: #3c3c3c;
      }
    }
  }
}
.baozhang {
  background: #f7f7f7;
  height: 65px;
  position: relative;
  z-index: 999;
  margin-top: -1px;
  img {
    width: 100%;
    height: 55px;
    margin-top: 5px;
  }
}
.check {
  height: 80px;
  width: 100%;
  background: #fff;
  padding-bottom: 9px;
  box-shadow: 0 5px 3px 3px #f7f7f7;
  ul {
    display: flex;
    justify-content: space-around;

    li {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #909090;
      line-height: 54px;
    }
    .liactive {
      color: #171717;
    }
  }
  .wai {
    width: 100%;
    padding-left: 13px;
    // overflow: hidden;
    .nei {
      white-space: nowrap;
      overflow: auto;
    }
    span {
      display: inline-block;
      height: 22px;
      padding: 6px 13px;
      background: #f7f7f7;
      border-radius: 11px;
      font-size: 10px;
      color: #a2a2a2;
      margin-right: 5px;
    }
    .spanactive {
      background: #edf6fe;
      color: #469deb;
    }
  }
}

.tuijian {
  width: 100%;
  background: #fff;
  padding-bottom: 44px;
  li {
    height: 97px;
    padding-top: 24px;
    margin: 0px 19px 0 17px;
    border-bottom: 1px solid #ebebeb;
  }
  li:last-child {
    border-bottom: none;
  }
  .left {
    width: 249px;
    // padding-top: 24px;
    float: left;
    h4 {
      font-size: 17px;
      font-weight: bold;
      color: #1a1a1a;
    }
    p {
      margin-top: 10px;
      span {
        font-size: 10px;
        color: #adadad;
      }
      i {
        font-size: 10px;
        font-weight: bold;
        color: #eb5e4b;
      }
      em {
        font-size: 15px;
        font-weight: bold;
        color: #eb5e4b;
      }
      .fir {
        margin-right: 10px;
      }
      .sec {
        i {
          margin-left: 6px;
          color: #1a1a1a;
        }
      }
    }
  }
  .right {
    float: right;
    button {
      width: 68px;
      height: 28px;
      background: #f8da4e;
      border-radius: 14px;
      border: none;
      font-weight: bold;
      color: #1a1a1a;
    }
    p {
      color: #adadad;
      font-size: 10px;
      text-align: center;
      margin-top: 3px;
    }
  }
}
.pjia {
  width: 100%;
  height: 500px;
}
.dibu {
  height: 50px;
  width: 100%;
  position: fixed;
  background: #fff;
  border-top: 1px solid#E5E5E5;
  display: flex;
  align-items: center;
  bottom: 0;
  left: 0;
  padding-left: 20px;
  padding-top: 5px;
  .smalog {
    display: flex;
    flex-direction: row;
    span {
      margin-right: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
      white-space: nowrap;
      img {
        // display: block;
        width: 22px;
        height: 22px;
      }
    }
  }
  .anniu {
    width: 127px;
    height: 40px;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    margin-right: 9px;
  }
  .anniu1 {
    background: #eaf5fe;
    border: 1px solid #4c9eeb;
    border-radius: 6px;
    font-weight: 500;
    color: #4c9eeb;
  }
  .anniu2 {
    img {
      width: 12px;
      height: 13px;
    }
    vertical-align: middle;
    background: #4c9eeb;
    border-radius: 4px;
    color: #fff;
  }
}
</style>
